<!-- src/components/StructureTree.vue -->
<template>
  <el-aside class="structure-tree" width="260px">
    <el-menu
      :default-active="activeKey"
      @select="handleSelect"
      unique-opened
      background-color="#fff"
      text-color="#303133"
      active-text-color="#409EFF"
    >
      <el-sub-menu v-for="group in treeData" :key="group.key" :index="group.key">
        <template #title>{{ group.label }}</template>

        <el-sub-menu v-for="child in group.children" :key="child.key" :index="child.key">
          <template #title>{{ child.label }}</template>

          <el-menu-item v-for="leaf in child.children" :key="leaf.key" :index="leaf.key">
            {{ leaf.label }}
          </el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 自定义树形结构数据
const treeData = [
  {
    key: 'Report',
    label: 'Report项目一',
    children: [
      {
        key: 'Report1',
        label: 'Report一',
        children: [
          { key: 'file1', label: '文件A' },
          { key: 'file2', label: '文件B' },
        ],
      },
      {
        key: 'Report2',
        label: 'Report二',
        children: [
          { key: 'file3', label: '文件C' },
          { key: 'file4', label: '文件D' },
        ],
      },
    ],
  },
  {
    key: 'Report',
    label: 'Report二',
    children: [
      {
        key: 'Report3',
        label: 'Report三',
        children: [
          { key: 'file5', label: '文件E' },
          { key: 'file6', label: '文件F' },
        ],
      },
    ],
  },
]

// 当前激活节点
const activeKey = ref('file1')

// 菜单选择回调
const handleSelect = (key: string) => {
  console.log('选中节点:', key)
  // 这里可以触发跳转、更新右侧内容等操作
}
</script>

<style scoped>
.structure-tree {
  background-color: white;
  border-right: 1px solid #ebeef5;
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.05);
}

:deep(.el-menu--vertical) {
  border-right: none;
}

:deep(.el-menu-item:hover),
:deep(.el-sub-menu__title:hover) {
  background-color: #ecf5ff !important;
}
</style>
